// 代码整理：懒人之家 lanrenzhijia.com
$(document).ready(function(){
	document.ondragstart=function(){return false;}//ie禁止拖拽
	document.onselectstart=function(){return false;}//ie禁止选定

	/*笔触次数*/
	var ms=[];

	/*获取画布宽高*/
	canvas_size={x:$("#canvas").width(),y:$("#canvas").height()};
	/*获取第一个画布左上偏移*/
	canvas_offset={x:$("#canvas")[0].offsetLeft,y:$("#canvas")[0].offsetTop};
	/*原点为0,0*/
	origin={x:0,y:0}
	/*结点为0，0*/
	end={x:0,y:0}
	/*类型=0*/
	type=0;
	/*不可拖拽e*/
	drawable=false;
	/*颜色不可改变*/
	color_changeable=false;

	/*获取ID为canvas的画布*/
	canvas=document.getElementById("canvas");
	/*获取ID为canvas2的画布*/
	canvas2=document.getElementById("canvas2");
	/*canvas二维绘图*/
	context=canvas.getContext('2d');
	/*canvas笔触的颜色为红色*/
	context.strokeStyle="red";
	//fill_canvas("#ffffff");
	/*canvas线条宽度为1*/
	context.lineWidth = 1;
	/*canvas2二维绘图*/
	context2=canvas2.getContext('2d');
	/*canvas2笔触的颜色为红色*/
	context2.strokeStyle="red";
	/*canvas2线条宽度为1*/
	context2.lineWidth = 1;

	canvas_rgb={r:1,g:1,b:1};


	/*mousedown点击让鼠标划线，mouseup松开时让线条不追随鼠标*/

	/*canvas2添加当鼠标指针移动到元素上方，并按下鼠标按键时，会发生mousedown事件*/
	$(canvas2).bind('mousedown',function(event){
		/*可拖拉*/
		drawable=true;
		/*原点坐标x=鼠标位置x-画布偏移位置x*/
		origin.x=event.clientX-canvas_offset.x;
		/*原点坐标y=鼠标位置y-画布偏移位置y*/
		origin.y=event.clientY-canvas_offset.y;
	});
	/*canvas2添加当在元素上放松鼠标按钮时，会发生 mouseup 事件*/
	$(canvas2).bind('mouseup',function(event){
		/*getImageData() 复制canvas画布上指定矩形的像素数据*/
		canvas_backup=context.getImageData(0, 0, canvas.width, canvas.height);
	});
	/*文档添加当在元素上放松鼠标按钮时，会发生 mouseup 事件*/
	$(document).bind('mouseup',function(event){
		/*类型==1/3/4且可拖拉*/
		if((type==1||type==3||type==4)&&drawable==true){
			/*不可拖拉*/
			drawable=false;
			/*canvas2画布清除给定矩形内的指定像素。*/
			/*要清除的左上角的x坐标，左上角的y坐标，矩形的宽度，矩形的高度，以像素计*/
			//context2.clearRect(0,0,canvas_size.x,canvas_size.y);
			/*结点坐标x=鼠标位置x-画布偏移位置x*/
			end.x=event.clientX-canvas_offset.x;
			/*结点坐标y=鼠标位置y-画布偏移位置y*/
			end.y=event.clientY-canvas_offset.y;
			/*画(canvas画布)*/
			draw(context);
		}else{
			/*不可拖拉*/
			drawable=false;
			/*颜色不可改变*/
			color_changeable=false;
		}
	});

	/*文档 添加当鼠标指针在指定的元素中移动时，就会发生 mousemove 事件。*/
	$(document).bind("mousemove",function(event){
		if(drawable==false)return;
		if(type==0){
			/*结点坐标x=鼠标位置x-画布偏移位置x*/
			end.x=event.clientX-canvas_offset.x;
			/*结点坐标y=鼠标位置x-画布偏移位置y*/
			end.y=event.clientY-canvas_offset.y;
			/*画(canvas画布)*/
			draw(context);
			/*起点=结点*/
			origin.x=end.x;
			/*起点=结点*/
			origin.y=end.y;
		}else if(type==1||type==3||type==4||type==5){
			/*结点坐标x=鼠标位置x-画布偏移位置x*/
			end.x=event.clientX-canvas_offset.x;
			/*结点坐标y=鼠标位置x-画布偏移位置y*/
			end.y=event.clientY-canvas_offset.y;
			if(type==5){
				/*fill() 方法填充当前的图像（路径）*/
				/*橡皮擦颜色*/
				/*橡皮色底色,结点开始，笔触宽高大小*/
				/*fill_canvas('#ffffff',end.x-10,end.y-10,20,20);
				 return;*/
			}
			else{
				/*笔触时时可看轨迹走向*/
				context2.clearRect(0,0,canvas_size.x,canvas_size.y);
				draw(context2);
			}

		}
		/* else if(type==2){
		 end.x=event.clientX-canvas_offset.x;
		 end.y=event.clientY-canvas_offset.y;
		 draw(context);
		 }*/
	});

	/*点击色条更换颜色*/
	/*var img = new Image();
	 img.src="img/color.bmp";
	 $(img).bind("load",function(){
	 canvas_color=document.getElementById("canvas_color");
	 context3=canvas_color.getContext('2d');
	 context3.drawImage(this, 0, 0,this.width,this.height);
	 canvas_color_data = context3.getImageData(0, 0, canvas_color.width, canvas_color.height);
	 $(canvas_color).bind("mousedown",function(event){
	 var idx = ((event.clientX-canvas_color.offsetLeft-1) + (event.clientY-canvas_color.offsetTop-1) * canvas_color_data.width) * 4;
	 var r = canvas_color_data.data[idx + 0];
	 var g = canvas_color_data.data[idx + 1];
	 var b = canvas_color_data.data[idx + 2];
	 $("#color_span").css("background-color","rgb("+r+","+g+","+b+")");
	 change_attr(-1,-1,"rgb("+r+","+g+","+b+")");
	 color_changeable=true;
	 });
	 $(canvas_color).bind("mousemove",function(event){
	 if(color_changeable==false)
	 return;
	 var x=event.clientX-canvas_color.offsetLeft-1;
	 if(x>=canvas_color_data.width||x<0)
	 return;
	 var y=event.clientY-canvas_color.offsetTop-1;
	 if(y>=canvas_color_data.height||y<0)
	 return;
	 var idx = (x + y * canvas_color_data.width) * 4;
	 var r = canvas_color_data.data[idx + 0];
	 var g = canvas_color_data.data[idx + 1];
	 var b = canvas_color_data.data[idx + 2];
	 $("#color_span").css("background-color","rgb("+r+","+g+","+b+")");
	 change_attr(-1,-1,"rgb("+r+","+g+","+b+")");
	 });
	 });*/
	/*$("#close_window").bind("click",function(){
	 $("#forbiden_back").fadeOut(300);
	 $("#pic_url").val('');
	 });*/

	/*$("#open_pic").bind("click",function(){
	 $("#forbiden_back").fadeOut(300);
	 open_img($("#pic_url").val());
	 $("#pic_url").val('');
	 });*/
	/**/
	open_img("images/5.jpg");
	/**/
	/*$("#size_bar").bind("mousedown",function(event){
	 var thumb=$("#size_thumb");
	 var main_w=$(this).width();
	 var mainLeft=$(this).offset().left;
	 thumb.css("left",event.clientX-mainLeft-thumb.width()/2+"px");
	 $("#size_span").html(Math.ceil($(thumb).position().left/main_w*5)+1);
	 change_attr(-1,$("#size_span").html(),-1);
	 $(document).bind("mousemove",size_bar_move);
	 $(document).bind("mouseup",function unbind(event){
	 $(document).unbind("mousemove",size_bar_move);
	 $(document).unbind("mouseup",unbind);
	 });
	 });*/

	/*$("#r_channel_bar").bind("mousedown",function(event){
	 var thumb=$("#r_channel_thumb");
	 var main_w=$(this).width();
	 var mainLeft=$(this).offset().left;
	 thumb.css("left",event.clientX-mainLeft-thumb.width()/2+"px");
	 $(document).bind("mousemove",{c:"r"},channel_bar_move);
	 $(document).bind("mouseup",function unbind(event){
	 canvas_rgb.r=0.5+$(thumb).position().left/main_w;
	 change_channel();
	 $(document).unbind("mousemove",channel_bar_move);
	 $(document).unbind("mouseup",unbind);
	 });
	 });*/
	/*$("#g_channel_bar").bind("mousedown",function(event){
	 var thumb=$("#g_channel_thumb");
	 var main_w=$(this).width();
	 var mainLeft=$(this).offset().left;
	 thumb.css("left",event.clientX-mainLeft-thumb.width()/2+"px");
	 $(document).bind("mousemove",{c:"g"},channel_bar_move);
	 $(document).bind("mouseup",function unbind(event){
	 canvas_rgb.g=0.5+$(thumb).position().left/main_w;
	 change_channel();
	 $(document).unbind("mousemove",channel_bar_move);
	 $(document).unbind("mouseup",unbind);
	 });
	 });*/
	/*$("#b_channel_bar").bind("mousedown",function(event){
	 var thumb=$("#b_channel_thumb");
	 var main_w=$(this).width();
	 var mainLeft=$(this).offset().left;
	 thumb.css("left",event.clientX-mainLeft-thumb.width()/2+"px");
	 $(document).bind("mousemove",{c:"b"},channel_bar_move);
	 $(document).bind("mouseup",function unbind(event){
	 canvas_rgb.b=0.5+$(thumb).position().left/main_w;
	 change_channel();
	 $(document).unbind("mousemove",channel_bar_move);
	 $(document).unbind("mouseup",unbind);
	 });
	 });*/

});

/*function size_bar_move(e){
 var thumb=$("#size_thumb");
 var main_w=$("#size_bar").width();
 var mainLeft=$("#size_bar").offset().left;
 if(e.clientX-mainLeft<0)
 thumb.css("left",-thumb.width()/2+"px");
 else if(e.clientX-mainLeft>main_w)
 thumb.css("left",main_w-thumb.width()/2+"px");
 else
 thumb.css("left",e.clientX-mainLeft-thumb.width()/2+"px");
 $("#size_span").html(Math.ceil($(thumb).position().left/main_w*5)+1);
 change_attr(-1,$("#size_span").html(),-1);
 }*/

/*function channel_bar_move(e){
 var c=e.data.c;
 var thumb=$("#"+c+"_channel_thumb");
 var main_w=$("#"+c+"_channel_bar").width();
 var mainLeft=$("#"+c+"_channel_bar").offset().left;
 if(e.clientX-mainLeft<0)
 thumb.css("left",-thumb.width()/2+"px");
 else if(e.clientX-mainLeft>main_w)
 thumb.css("left",main_w-thumb.width()/2+"px");
 else
 thumb.css("left",e.clientX-mainLeft-thumb.width()/2+"px");
 }*/

/*画线条*/
function draw(context){
	if(type==0||type==1||type==2){
		context.beginPath();
		context.moveTo(origin.x,origin.y);
		context.lineTo(end.x,end.y);
		context.stroke();
	}else if(type==3){
		var k = ((end.x-origin.x)/0.75)/2,
			w = (end.x-origin.x)/2,
			h = (end.y-origin.y)/2,
			x=(end.x+origin.x)/2,
			y=(end.y+origin.y)/2;
		context.beginPath();
		context.moveTo(x, y-h);
		context.bezierCurveTo(x+k, y-h, x+k, y+h, x, y+h);
		context.bezierCurveTo(x-k, y+h, x-k, y-h, x, y-h);
		context.closePath();
		context.stroke();
	}else if(type==4){
		context.beginPath();
		context.rect(origin.x,origin.y,end.x-origin.x,end.y-origin.y);
		context.stroke();
	}
}

/*判断画出的为线条/椭圆/矩形*/
function change_attr(tp,sz,clr){
	if(tp!=-1)
		type=tp;
	if(clr!=-1){
		context.strokeStyle=clr;
		context2.strokeStyle=clr;
	}
	if(sz!=-1){
		context.lineWidth = sz;
		context2.lineWidth = sz;
	}
}
/*清除画布*/
function clear_canvas(){
	context.clearRect(0,0,canvas_size.x,canvas_size.y);
}
/*canvas画布里的图片*/
function fill_canvas(col,orix,oriy,w,h){
	context.fillStyle=col;
	context.fillRect(orix,oriy,w,h);
}
/*改变轨迹*/
/*function change_channel(){
 can_data = context.getImageData(0, 0, canvas.width, canvas.height);
 for(var i=0;i<canvas.width;i++){
 for(var j=0;j<canvas.height;j++){
 var idx = (i + j * can_data.width) * 4;
 can_data.data[idx + 0]=canvas_backup.data[idx + 0]*canvas_rgb.r;
 can_data.data[idx + 1]=canvas_backup.data[idx + 1]*canvas_rgb.g;
 can_data.data[idx + 2]=canvas_backup.data[idx + 2]*canvas_rgb.b;
 }
 }
 context.putImageData(can_data, 0, 0);
 }*/
/*得到平均的高斯分布*/
/*function get_gaussian_average(can_data,g,gaussian_array,channel,x,y){
 var t=0;
 for(var i=0;i<2*g+1;i++){
 for(var j=0;j<2*g+1;j++){
 var idx = (x+i-g + (y+j-g) * can_data.width) * 4;
 t+=can_data.data[idx + channel]*gaussian_array[i][j];
 }
 }
 return t;
 }*/

/*图片路径*/
function open_img(url){
	var img = new Image();
	img.src=url;
	$(img).bind("load",function(){
		//fill_canvas('#ffffff',0,0,canvas_size.x,canvas_size.y);
		/*画布大小调整*/
		context.drawImage(this,0,0,this.width,this.height);
		/*canvas2 getImageData() 复制canvas画布上指定矩形的像素数据*/
		canvas_backup=context.getImageData(0, 0, canvas.width, canvas.height);
	});
}

// 代码整理：懒人之家 lanrenzhijia.com



/*$(document).ready(function(){
 $(document).find(".goBackBtn").click(function(){
 /!*alert("000000000");*!/
 /!*draw();*!/
 if(!"end.x".equals("end.x")){
 return;
 }
 });
 });*/

/*
 function goBack(){
 var linenlastIndex=ms.join("").substr(0,ms.length-1).lastIndexOf("0");
 if(linenlastIndex==0){
 clearline();
 }else{
 mx = mx.slice(0,linenlastIndex);  //记录值
 my = my.slice(0,linenlastIndex);  //坐标
 ms =ms.slice(0,linenlastIndex);
 context.clearRect(0,0,box.find(".show").width(),box.find(".show").height());
 context.save();
 context.beginPath();
 context.lineWidth = linewidth;
 for (var i=0;i<ms.length;i++) {
 lastX = mx[i];
 lastY = my[i];
 if (ms[i] == 0) {
 context.moveTo(lastX,lastY);
 } else {
 context.lineTo(lastX,lastY);
 }
 }
 context.strokeStyle = linestyle;
 context.stroke();
 context.restore();
 var pairindex=pairl.length-1;
 box.find(".showleft").children("span").each(function(index, element) {
 if($(this).attr("pair")==pairl[pairindex]){
 $(this).removeClass("addstyle");
 $(this).attr("sel","0");
 $(this).attr("check","0");
 $(this).removeAttr("pair");
 };
 });
 box.find(".showleft").attr('first',0);
 box.find(".showright").children("span").each(function(index, element) {
 if($(this).attr("pair")==pairl[pairindex]){
 $(this).removeClass("addstyle");
 $(this).attr("sel","0");
 $(this).attr("check","0");
 $(this).removeAttr("pair");
 };
 });
 box.find(".showright").attr('first',0);
 pair-=1;
 pairl=pairl.slice(0,pairindex);
 pairr=pairr.slice(0,pairindex);
 };
 };*/
